<template>
	<view class="content">
		<view class="topNav">
			<view class="topNav" style="margin:0 -32rpx ;padding32rpx ;height: 90rpx;">
				<!-- <div class="cuIcon-back icon left" @click="back"></div> -->
				<!-- <div class="center">{{ more == 2 ? '考试题目' : '试卷答题' }}</div> -->
				<div class="center">考试题目</div>
			</view>
		</view>
		<div style="width: 100%;height: 90rpx;"></div>
		<div class="answerCont">
			<!-- 		<div class='info' v-show="data.examination_name">
				<div class='title'>{{data.examination_name}}</div>
				<div class='data' v-show='type==1'>
					<div>
						<span class='cuIcon-time'
							style='display: inline-block;margin-right: 10rpx;color: #a67000;'></span>
						<span style='color: #a67000;margin-right: 10rpx;'>{{Math.floor(time/60)}}</span> <span
							style='color: #646972;'>/ {{allTime/60}}分钟</span>
					</div>
					<div class='btns'>
						<div class='start' v-show='isCountdown'>
							开始答题
						</div>
						<div class='start' @click='countdownStart()' v-show='!isCountdown'
							style='background-color: #a37101;color: white;border: 0;'>
							开始答题</div>
						<div class='start' v-show='!isCountdown'>
							提交试卷
						</div>
						<div class='submit' v-show='isCountdown' @click='submitTo()'>提交试卷</div>
					</div>
				</div>
			</div> -->
			<div class="dataCont">
				<div class="dataItem">
					<div class="itemTop">
						<div class="typeName" v-show="suject.type == 0">单选题</div>
						<div class="typeName" v-show="suject.type == 1">多选题</div>
						<div class="typeName" v-show="suject.type == 2">是非题</div>
						<div class="progress" style="color: #646972;font-size:28rpx ;">
							<span style="color: #a67000;font-size:38rpx ;">{{ data.current_number }}</span>
							/{{ data.total_number }}
						</div>
					</div>
					<div class="itemName">{{ data.current_number }}、{{ suject.name }}</div>
					<div :class="indexArr.indexOf('a') != '-1' ? 'itemList selected' : 'itemList'" @click="indexTo('a')" v-show="suject.answer_a != ''">
						<div class="itemNum">A</div>
						<div class="itemCont">{{ suject.answer_a }}</div>
					</div>
					<div class="itemList selected isWrong" v-show="wrongAnswer == 'a'">
						<div class="itemNum">A</div>
						<div class="itemCont">{{ suject.answer_a }}</div>
					</div>
					<div :class="indexArr.indexOf('b') != '-1' ? 'itemList selected' : 'itemList'" @click="indexTo('b')" v-show="suject.answer_b != ''">
						<div class="itemNum">B</div>
						<div class="itemCont">{{ suject.answer_b }}</div>
					</div>
					<div class="itemList selected isWrong" v-show="wrongAnswer == 'b'">
						<div class="itemNum">B</div>
						<div class="itemCont">{{ suject.answer_b }}</div>
					</div>
					<div :class="indexArr.indexOf('c') != '-1' ? 'itemList selected' : 'itemList'" @click="indexTo('c')" v-show="suject.answer_c != ''">
						<div class="itemNum">C</div>
						<div class="itemCont">{{ suject.answer_c }}</div>
					</div>
					<div class="itemList selected isWrong" v-show="wrongAnswer == 'c'">
						<div class="itemNum">C</div>
						<div class="itemCont">{{ suject.answer_c }}</div>
					</div>
					<div :class="indexArr.indexOf('d') != '-1' ? 'itemList selected' : 'itemList'" @click="indexTo('d')" v-show="suject.answer_d != ''">
						<div class="itemNum">D</div>
						<div class="itemCont">{{ suject.answer_d }}</div>
					</div>
					<div class="itemList selected isWrong" v-show="wrongAnswer == 'd'">
						<div class="itemNum">D</div>
						<div class="itemCont">{{ suject.answer_d }}</div>
					</div>
					<div class="itemImgCont" v-if="suject.picture != null&&suject.picture != ''"><img :src="suject.picture" alt="" class="imgCont" /></div>
				</div>
				<!-- {{ the_right_answer.toUpperCase() }} -->
				<div style="height: 120rpx;padding-top: 120rpx;">
					<div v-show="isShowTrue" style="color: #0055ff;">回答正确</div>
					<div v-show="isShowFalse" style="color: red;">
						回答错误，
						<span style="color: #0055ff;">正确答案是:{{ the_right_answer.toUpperCase() }}</span>
					</div>
				</div>
			</div>
			<div class="bottomBtn">
				<!-- <div @click="previous()" v-show="data.upper != 0" v-if="isShow">上一题</div> -->
				<div @click="next()" v-show="data.lower != 0" v-if="isShow">下一题</div>
				<!-- <div @click="previous()">上一题</div>
				<div @click="next()">下一题</div> -->
				<div v-show="!isShow" style="background-color: #a37101;color: white;border: 0;" @click="save()">提交</div>
				<div v-show="isShowResults" style="background-color: #a37101;color: white;border: 0;" @click="toNext()">查看结果</div>
			</div>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			from: 6,
			classroom_practice_id: null,
			subject_id: null,
			exam_no: null,
			data: {},
			suject: {},
			indexArr: [],
			isCountdown: false,
			timer: null,
			allTime: 7200,
			maxtime: 0,
			time: 0,
			is_answer: 1, //是否提交过试卷1否，2是
			type: 1, //是否是查看试卷1否，2是
			more: 1, //
			the_right_answer: 'a',
			wrongAnswer: null,
			isShowTrue: false,
			isShowFalse: false,
			isShow: false,
			isShowResults: false,
		};
	},
	onLoad(e) {
		//console.log('e==入参===', e)
		this.classroom_practice_id = e.classroom_practice_id || 1;
		this.from = e.from || 6;
		// this.subject_id = e.subject_id||0
		if (e.exam_no == 'undefined') {
			e.exam_no = null;
		}
		if (e.is_answer == 'undefined') {
			e.is_answer = 1;
		}
		if (e.type == 'undefined') {
			e.type = 1;
		}
		if (e.more == 'undefined') {
			e.more = 1;
		}
		this.exam_no = e.exam_no || null;
		this.is_answer = e.is_answer || 1;
		this.type = e.type || 1;
		this.more = e.more || 1;
	},
	onShow() {
		var end = setInterval(function() {}, 1);
		var start = end - 100 > 0 ? end - 100 : 0;
		for (var i = start; i <= end; i++) {
			clearInterval(i);
		}
		this.maxtime = this.allTime;
		this.time = this.maxtime;
		this.getData();
		//console.log('执行了onShow')
	},
	mounted() {},
	onHide() {
		uni.hideLoading();
		clearInterval(this.timer);
		var end = setInterval(function() {}, 1);
		var start = end - 500 > 0 ? end - 500 : 0;
		for (var i = start; i <= end; i++) {
			clearInterval(i);
		}
	},
	beforeDestroy() {
		uni.hideLoading();
		clearInterval(this.timer);
		var end = setInterval(function() {}, 1);
		var start = end - 500 > 0 ? end - 500 : 0;
		for (var i = start; i <= end; i++) {
			clearInterval(i);
		}
	},
	methods: {
		countdownStart() {
			this.isCountdown = true;
			// 开始倒计时
			// 倒计时结束返回上一页
			this.timer = setInterval(() => {
				this.CountDown();
			}, 1000);

			// clearInterval(this.timer);
		},
		CountDown() {
			//console.log('this.maxtime==', this.maxtime);
			if (this.maxtime >= 0) {
				this.time = this.maxtime;
				--this.maxtime;
			} else {
				uni.showToast({
					title: '答题超时，请重新操作',
					icon: 'none',
					duration: 2000
				});
				clearInterval(this.timer);
				setTimeout(() => {
					uni.hideLoading();
					uni.navigateBack();
				}, 2500);
			}
		},
		back() {
			uni.navigateTo({
				url: `/pages/index/index?type=3`
			});
			
			// // uni.navigateBack()
			// if (this.from == 6) {
			// 	// uni.navigateTo({
			// 	// 	url: `/pages/course/index`
			// 	// });
			// 	uni.navigateTo({
			// 		url: `/pages/index/index?type=3`
			// 	});
			// } else {
			// 	uni.navigateTo({
			// 		url: `/pages/my/myTest`
			// 	});
			// }
		},
		indexTo(num) {
			if(this.isShowTrue||this.isShowFalse){
				return
			}
			if(this.suject.type==0||this.suject.type==2){
				this.indexArr=[num]
			}else{
				if (this.indexArr.indexOf(num) != '-1') {
					this.indexArr.splice(this.indexArr.indexOf(num), 1);
				} else {
					this.indexArr.push(num);
				}
			}
			
			console.log('num==', num);
			console.log('this.indexArr==', this.indexArr);
			// if (this.more == 2) {
			// 	// 来自题库，做错了就把错误的显示出来，正确的不管
			// 	if (this.the_right_answer != num) {
			// 		this.index = this.the_right_answer
			// 		this.wrongAnswer = num
			// 		// 显示错误的
			// 	} else {
			// 		this.wrongAnswer = null
			// 	}
			// }
		},
		getData() {
			this.isShowTrue = false;
			this.isShowFalse = false;
			this.isShow = false;
			this.isShowResults = false;
			this.indexArr = [];
			let _this = this;
			let url = `/practice/answer`;
			let data = {
				classroom_practice_id: _this.classroom_practice_id
				// exam_no: _this.exam_no
			};
			// if (this.more == 2) {
			// 	url = `/practice/subject_list`;
			// 	data = {
			// 		examination_catalogue_id: _this.classroom_practice_id
			// 	};
			// }
			_this.uniRequest({
				url: url,
				method: 'post',
				data: data,
				success: res => {
					//console.log('返回值', res);
					if (res.code == 200) {
						this.data = res.data;
						this.suject = res.data.suject;
						// this.indexArr = res.data.user_answer.split(',');
						this.the_right_answer = res.data.suject.the_right_answer;
						this.wrongAnswer = null;
					}
				},
				fail: err => {
					//console.log('request fail错误', err);
				}
			});
		},
		previous() {
			this.isShowTrue = false;
			this.isShowFalse = false;
			this.isShow = false;
			this.wrongAnswer = null;
			this.isShowResults = false;
			this.indexArr = [];
			let _this = this;
			let url = `/practice/up_question`;
			let data = {
				classroom_practice_id: _this.classroom_practice_id,
				subject_id: _this.suject.id,
				current_number: _this.data.current_number,
				exam_no: _this.data.exam_no
			};
			// if (this.more == 2) {
			// 	url = `/practice/up_subject`;
			// 	data = {
			// 		current_number: _this.data.current_number,
			// 		subject_id: _this.classroom_practice_id,
			// 		examination_catalogue_id: _this.classroom_practice_id
			// 	};
			// }
			_this.uniRequest({
				url: url,
				method: 'post',
				data: data,
				success: res => {
					//console.log('返回值', res);
					if (res.code == 200) {
						this.data = res.data;
						this.suject = res.data.suject;
						// this.indexArr = res.data.user_answer.split(',');
						this.the_right_answer = res.data.suject.the_right_answer;
					}
				},
				fail: err => {
					//console.log('request fail错误', err);
				}
			});
		},
		next() {
			this.isShowTrue = false;
			this.isShow = false;
			this.isShowFalse = false;
			this.wrongAnswer = null;
			this.isShowResults = false;
			this.indexArr = [];
			let _this = this;
			let url = `/practice/down_question`;
			let data = {
				classroom_practice_id: _this.classroom_practice_id,
				subject_id: _this.suject.id,
				current_number: _this.data.current_number,
				exam_no: _this.data.exam_no
			};
			// if (this.more == 2) {
			// 	url = `/practice/down_subject`;
			// 	data = {
			// 		current_number: _this.data.current_number,
			// 		subject_id: _this.classroom_practice_id,
			// 		examination_catalogue_id: _this.classroom_practice_id
			// 	};
			// }
			_this.uniRequest({
				url: url,
				method: 'post',
				data: data,
				success: res => {
					//console.log('返回值', res);
					if (res.code == 200) {
						this.data = res.data;
						this.suject = res.data.suject;
						// this.indexArr = res.data.user_answer.split(',');
						this.the_right_answer = res.data.suject.the_right_answer;
					}
				},
				fail: err => {
					//console.log('request fail错误', err);
				}
			});
		},
		// 保存
		save() {
			let _this = this;
			
			let strArr = JSON.parse(JSON.stringify(this.indexArr)).sort().join(',');
			if(strArr==''){
				uni.showToast({
					title: '请先选择',
					mask: true,
					duration: 1000,
					icon: 'none'
				})
				return
			}
			console.log('strArr==',strArr.toUpperCase())
			console.log('the_right_answer==',this.the_right_answer)
			// if (JSON.stringify(strArr) == JSON.stringify(this.the_right_answer)) {
			// 	this.isShowTrue = true;
			// } else {
			// 	this.isShowFalse = true;
			// }
			// this.isShow=true
			// return;
			_this.uniRequest({
				url: `/practice/submit_answer`,
				method: 'post',
				data: {
					subject_id: _this.suject.id,
					select_answer: strArr.toUpperCase(),
					exam_no: _this.data.exam_no
				},
				success: res => {
					console.log('返回值', res);

					if (res.code == 200) {
						if (strArr.toUpperCase() == this.the_right_answer.toUpperCase()) {
							this.isShowTrue = true;
						} else {
							this.isShowFalse = true;
						}
						this.isShow = true;
						if (this.data.lower == 0) {
							this.submitTo();
						}
						// 判断答案是都正确,显示结果和上一题,下一题按钮
					}
				},
				fail: err => {
					//console.log('request fail错误', err);
				}
			});
		},
		// 提交，到了最后一题提交，获取分数
		submitTo() {
			let _this = this;
			_this.uniRequest({
				url: `/practice/correct_rate`,
				method: 'post',
				data: {
					classroom_practice_id: _this.classroom_practice_id,
					exam_no: _this.data.exam_no
				},
				success: res => {
					
					if (res.code == 200) {
						this.isShowResults = true;
						console.log('返回值', res);
						uni.setStorageSync("myResults",res.data)
					}
				},
				fail: err => {
					//console.log('request fail错误', err);
				}
			});
		},
		toNext() {
			uni.hideToast();
			uni.hideLoading();
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			let curParam = routes[routes.length - 1].options; //获取路由参数
			let param = ''
			for (let key in curParam) {
				if(param==''){
					param += '?' + key + '=' + curParam[key]
				}else{
					param += '&' + key + '=' + curParam[key]
				}
			}
			let urlData=curRoute+param
			console.log('param===', urlData);
			uni.setStorageSync("urlData",urlData)
			uni.navigateTo({
				url: `/pages/course/complete`
			});
		}
	}
};
</script>

<style lang="less" scoped>
.content {
	min-height: 100vh;
	.topNav {
		background: #a67000;
		color: white;
		background: #fffdfc;
		color: #000000;
	}
	background: #eee7e5;
	.answerCont {
		.info {
			width: calc(100% - 64rpx);
			background: #fffdfc;
			border-radius: 16rpx;
			margin: 32rpx;
			padding: 32rpx;
			box-sizing: border-box;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #181e27;
				line-height: 48rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.data {
				display: flex;
				justify-content: space-between;
				align-items: center;

				> div {
					width: 50%;
				}

				.btns {
					display: flex;
					justify-content: space-between;

					> div {
						font-size: 24rpx;
						font-weight: normal;
						color: #959ba5;
						line-height: 56rpx;
						text-align: center;
					}

					.start {
						width: 140rpx;
						background: #eeeef0;
						border-radius: 12rpx;
						color: #959ba5;
					}

					.submit {
						width: 140rpx;
						border-radius: 12rpx;
						background-color: #a37101;
						color: #ffffff;
						background-color: #a37101;
					}
				}
			}
		}
	}

	.dataCont {
		width: 100%;
		padding: 32rpx 32rpx 0;
		box-sizing: border-box;
		background: #fffdfc;
		border-radius: 24rpx 24rpx 0 0;

		.dataItem {
			.itemTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 0 22rpx;

				.typeName {
					font-size: 28rpx;
					font-weight: normal;
					color: #ff9e56;
					width: 108rpx;
					line-height: 40rpx;
					text-align: center;
					background: #fffdfc;
					border: 1px solid #ff9e56;
					border-radius: 6rpx;
				}
			}

			.itemName {
				margin: 10rpx 0 20rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
			}

			.itemList {
				margin: 20rpx 0;
				font-size: 32rpx;
				display: flex;
				align-items: center;

				/* vertical-align: bottom; */
				.itemNum {
					width: 60rpx;
					height: 60rpx;
					margin-right: 40rpx;
					line-height: 60rpx;
					text-align: center;
					background: #fffdfc;
					border: 1px solid #e0e0e0;
					border-radius: 50%;
				}

				.itemCont {
					width: calc(100% - 100rpx);
					font-weight: normal;
					color: #343b45;
				}
			}

			.itemList.selected {
				.itemNum {
					background: #a67000;
					color: white;
					border: 1px solid #a67000;
				}

				.itemCont {
					color: #a67000;
				}
			}

			.isWrong.itemList.selected {
				.itemNum {
					background: red;
					color: white;
					border: 1px solid red;
				}

				.itemCont {
					color: red;
				}
			}

			.itemImgCont {
				width: 100%;
				text-align: center;
				margin-top: 60rpx;
				min-height: 290rpx;

				.imgCont {
					width: 440rpx;
					height: 290rpx;
					margin: 0 auto;
					border-radius: 12rpx;
				}
			}
		}
	}

	.bottomBtn {
		width: 100%;
		height: 120rpx;
		background: #fffdfc;
		box-shadow: 0px 2px 12px 0px rgba(202, 202, 202, 0.5);
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;

		> div {
			width: 180rpx;
			line-height: 72rpx;
			border: 1px solid #a67000;
			border-radius: 12rpx;
			text-align: center;
			background: #fffdfc;
			border: 1px solid #a67000;
			color: #a67000;
			font-size: 28rpx;
		}
	}
}
</style>
